<template>
<transition name="next">
    <div class="next"  v-if="show">
        <!-- <transition name="next"> -->
            <svg class="icon next-font" aria-hidden="true">
                <use xlink:href="#icon-baogaoxiala"></use>
            </svg>
        <!-- </transition> -->
    </div>
</transition>
</template>
<script>
export default {
    data(){
        return{
            show:true,
        }
    },
    created(){
        this.continuous()
    },
    methods:{
        continuous(){
            setInterval(()=>{
                this.show = !this.show
            },900)
        }
    }
}
</script>
<style lang="less" scoped>
.next{
    background:transparent;
    text-align: center;
    position:absolute;
    height:0.34rem;
    width:0.34rem;
    left:50%;
    bottom:-0.1rem;
    font-size:0.34rem;
    line-height:0.34rem;
    // transform:rotateX(-50%);
    // left:0;
    // bottom:0;

    .icon{
        font-size:0.34rem;
        color:#398af2;
    }
}
.next-leave-active{
    transition: all 1s ease;
}
.next-leave-active{
    // transform: translateY(20px);
    bottom:-0.4rem;
    opacity: 0;
}
</style>
